<template>
  <el-dialog v-model="isShow" width="692px" title="退回订单原因" @close="handleClose">
    <div class="cancel_box">
      <div class="reason_box">
        <div class="quick_box">
          <div class="quick_tit"><span>快捷</span>用语</div>
          <div class="quick_list">
            <div
              class="quick_item"
              v-for="item in quickList"
              :key="item.id"
              @click="clickQuick(item)"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="reason_form">
            <div class="textarea">
              <el-input type="textarea" :rows="7" v-model="reasonVal"></el-input>
            </div>
            <div class="flex reason_btn">
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="handleSubmit">提交</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import { cancelOrder } from '@/api/business/business.js'

interface QuickItem {
  id: number
  title: string
}

interface Props {
  orderId?: number | null
  pageType?: string | null
}

const props = withDefaults(defineProps<Props>(), {
  orderId: null,
  pageType: null,
})

const emit = defineEmits<{
  close: []
  success: [string]
}>()

const isShow = defineModel<boolean>({ default: false })

const store = useStore()

const quickList = ref<QuickItem[]>([
  {
    id: 1,
    title: '您好，当前时段场地已被占用，请更换时段或更换其他场地。',
  },
  {
    id: 2,
    title: '您好，当前时段场馆已被VIP用户占用，请更换其他场地。',
  },
])

const reasonVal = ref('您好，当前时段场地已被占用，请更换时段或更换其他场地。')

// 点击快捷用语
const clickQuick = (item: QuickItem) => {
  reasonVal.value = item.title
}

// 关闭取消订单弹窗
const handleClose = () => {
  emit('close')
}

// 退回订单原因提交
const handleSubmit = debounce(
  async () => {
    if (reasonVal.value == '') {
      ElMessage.error('请输入退回订单原因')
      return
    }
    const cancelParams = {
      userId: store.state.user.id,
      orderId: props.orderId,
      orderRemarks: reasonVal.value,
      cancelFlag: props.pageType == 'order' ? 0 : null,
    }
    const res = await cancelOrder(cancelParams)
    emit('success', res.msg!)
  },
  1000,
  { leading: true, trailing: false },
)
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-dialog__body {
    padding: 15px 30px;
  }
}
.reason_box {
  .quick_tit {
    font-size: 18px;
    color: #383838;
    span {
      color: #2a82e4;
    }
  }
  .quick_list {
    .quick_item {
      font-size: 14rpx;
      color: #808080;
      margin-top: 10px;
      cursor: pointer;
    }
  }
  .reason_form {
    :deep(.el-textarea__inner) {
      width: 100%;
      height: 405rpx;
      background: #f6f7fb;
      border-radius: 14px;
      margin: 8px 0 30px;
      color: #808080;
      box-sizing: border-box;
      font-size: 14px;
      color: #808080;
      font-family: Microsoft YaHei;
      border: none;
      resize: none;
    }
  }
  .reason_btn {
    justify-content: center;
    .el-button {
      width: 90px;
      height: 38px;
      border-radius: 8px;
    }
  }
}
</style>
